<template>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="store.state.permission.dialogVisible" title="编辑信息">
        <el-form :model="store.state.permission.editForm">
            <el-form-item label="ID" :label-width="formLabelWidth">
                <el-input v-model="store.state.permission.editForm.id" autocomplete="off" :disabled="flag1" />
            </el-form-item>
            <el-form-item label="用户" :label-width="formLabelWidth">
                <el-input v-model="store.state.permission.editForm.username" autocomplete="off" :disabled="flag1" />
            </el-form-item>
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox-group v-model="checkbox" size="small" :disabled="flag">
                    <el-checkbox label="成员变更" size="large" border :key="Math.random()" />
                    <el-checkbox label="用户权限管理" size="large" border :key="Math.random()" />
                    <el-checkbox label="住户信息修改" size="large" border :key="Math.random()" />
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handlecancel">取消</el-button>
                <el-button type="primary" @click="handelsubmit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import http from '@/api/api';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';

const store = useStore()
const formLabelWidth = '140px'
//复选框组值
const checkbox = ref([])
//父组件重新获取信息
const emit = defineEmits(['reGetList'])
const flag = ref(false)
const flag1 = ref(false)


//监听编辑框显示状态
watch(
    () => store.state.permission.dialogVisible,
    () => {
        checkbox.value = store.state.permission.editForm.power[0] == '所有权限' ? ["成员变更", "用户权限管理", "住户信息修改"] : store.state.permission.editForm.power
    }
)
const user = JSON.parse(localStorage.getItem('user'))
//权限管理
if (user.power.includes('所有权限')||user.power.includes('用户权限管理')) {
    flag.value = false
}
else {
    flag.value = true
}
//用户信息修改
if (user.power.includes('所有权限')||user.power.includes('住户信息修改')) {
    flag1.value = false
}
else {
    flag1.value = true
}

//确认修改
const handelsubmit = () => {

    let arr: any = []
    if (checkbox.value.length == 3) {
        arr = ['所有权限']
    } else {
        for (let item in checkbox.value) {
            console.log(checkbox.value[item]);
            arr.push(checkbox.value[item])
        }
    }
    store.commit('editPerData', arr)

    http(`/register/${store.state.permission.editForm.id}`, 'put', store.state.permission.editForm).then(res => {
        console.log(res);
        if (res.status === 200) {
            ElMessage({
                type: 'success',
                message: '修改成功！',
            })

            emit('reGetList')
        } else {
            ElMessage({
                type: 'error',
                message: '修改失败！',
            })
        }
        store.commit('changePerDialog')
    })
}

//取消修改
const handlecancel = () => {
    store.commit('changePerDialog')
    ElMessage({
        type: 'info',
        message: '已取消！',
    })
}
</script>

<style scoped></style>